<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="目标名称">
        <el-input
          v-model="formInline.objectName"
          @keyup.enter.native="findByQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input
          v-model="formInline.creator"
          @keyup.enter.native="findByQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.review" clearable>
          <el-option label="未审核" value="0"> </el-option>
          <el-option label="通过" value="1"> </el-option>
          <el-option label="未通过" value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="完成状态">
        <el-select v-model="formInline.status" clearable>
          <el-option label="未开始" value="0"> </el-option>
          <el-option label="进行中" value="1"> </el-option>
          <el-option label="已超时" value="2"> </el-option>
          <el-option label="已完成" value="3"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="findByQuery">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" round @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      id="table"
      :data="listObject"
      style="width: 100%"
      :max-height="tableHeight"
      @expand-change="getKeyResults"
    >
      <el-table-column label="目标" prop="name"></el-table-column>
      <el-table-column type="expand" label="关键结果">
        <template slot-scope="props">
          <el-table
            :data="props.row.keyResults"
            v-loading="!props.row.hasKeyResults"
          >
            <el-table-column label="关键结果" prop="name"></el-table-column>
            <el-table-column label="描述" prop="descriptors"></el-table-column>
            <el-table-column label="完成状态" prop="status">
              <template slot-scope="scope">
                <el-tag v-if="!scope.row.status" size="small" type=""
                  >未完成</el-tag
                >
                <el-tag v-if="scope.row.status" size="small" type="success"
                  >已完成</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="完成时间"
              prop="completeTime"
            ></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="上级目标"
        prop="parentName"
        v-if="type != 1"
      ></el-table-column>
      <el-table-column label="描述" prop="descriptors"></el-table-column>
      <el-table-column label="创建者" prop="creator"></el-table-column>
      <el-table-column label="审核人" prop="reviewer"></el-table-column>
      <el-table-column label="审核状态" prop="review">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.review === 0" size="small" type=""
            >未审核</el-tag
          >
          <el-tag v-if="scope.row.review === 1" size="small" type="success"
            >通过</el-tag
          >
          <el-tag v-if="scope.row.review === 2" size="small" type="danger"
            >未通过</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="info"
            >未开始</el-tag
          >
          <el-tag v-if="scope.row.status === 1" size="small" type=""
            >进行中</el-tag
          >
          <el-tag v-if="scope.row.status === 2" size="small" type="danger"
            >已超时</el-tag
          >
          <el-tag v-if="scope.row.status === 3" size="small" type="success"
            >已完成</el-tag
          >
        </template></el-table-column
      >
      <el-table-column label="难度星级" prop="stars" width="200px">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.stars"
            disabled
            :texts="texts"
            show-text
            text-color="#ff9900"
          >
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column label="得分" prop="score">
        <template slot-scope="scope">
          <p v-if="scope.row.score >= 0.6" style="color: yellowgreen">
            {{ scope.row.score }}
          </p>
          <p v-if="scope.row.score < 0.6" style="color: red">
            {{ scope.row.score }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="截止时间" prop="endTime"></el-table-column>
      <el-table-column label="完成时间" prop="completeTime"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="reviewObjectiveHandle(scope.row)"
            :disabled="scope.row.status == 3 || scope.row.review == 2"
            >审核</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button
            type="text"
            :disabled="scope.row.status != 3 || scope.row.score"
            @click="scoreHandle(scope.row)"
            >评分</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="current"
      :page-sizes="[10, 15, 20, 50]"
      :page-size="size"
      :total="total"
    >
    </el-pagination>

    <!-- 审核对话框 -->
    <el-dialog
      title="审核目标"
      :visible.sync="dialogReviewFormVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        :model="reviewForm"
        ref="reviewForm"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="审核结果" prop="review">
          <el-select v-model="reviewForm.review">
            <el-option label="未审核" :value="0" disabled> </el-option>
            <el-option label="通过" :value="1"> </el-option>
            <el-option label="不通过" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="难度星级"
          v-if="reviewForm.review == 1"
          prop="stars"
        >
          <el-select v-model="reviewForm.stars">
            <el-option
              v-for="(item, index) in texts"
              :label="item"
              :value="index + 1"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原因" v-show="reviewForm.review == 2">
          <el-input
            type="textarea"
            :rows="4"
            v-model="reviewForm.reason"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitReviewForm('reviewForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- OKR评分对话框 -->
    <el-dialog
      title="评分"
      :visible.sync="scoreFormVisible"
      width="600px"
      :before-close="scoreHandleClose"
    >
      <el-form
        :model="scoreForm"
        ref="scoreForm"
        label-position="left"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="OKR得分：" prop="score">
          <el-input-number
            v-model="scoreForm.score"
            :precision="1"
            :step="0.1"
            :min="0"
            :max="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="scoreHandleClose">取 消</el-button>
        <el-button type="primary" @click="submitScoreForm('scoreForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "CheckingByMe",
  props: {
    type: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      tableHeight: 600,
      texts: ["简单", "一般", "有点难", "值得挑战", "极具挑战"],
      listObject: [],
      listKeyResults: [],
      current: 1,
      size: 10,
      total: 0,
      formInline: {},
      objectList: [],
      reviewForm: { id: 0, review: 0, stars: 0, endTime: "", reason: "" },
      scoreForm: { id: 0, score: 0 },
      dialogReviewFormVisible: false,
      scoreFormVisible: false,
      rules: {
        review: [
          {
            required: true,
            type: "number",
            min: 1,
            max: 2,
            message: "审核结果错误！",
            trigger: "blur",
          },
        ],
        stars: [
          {
            required: true,
            type: "number",
            min: 1,
            max: 5,
            message: "难度星级错误！",
            trigger: "blur",
          },
        ],
        score: [
          {
            required: true,
            type: "float",
            min: 0,
            max: 1,
            message: "分数错误！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      // // this.getUserList();
    },
    handleCurrentChange(val) {
      this.current = val;
      // this.getUserList();
    },
    findByQuery() {
      this.current = 1;
      this.getListObject();
    },
    reviewObjectiveHandle(row) {
      this.reviewForm.id = row.id;
      this.reviewForm.review = row.review;
      this.reviewForm.stars = row.stars ? row.stars : null;
      this.reviewForm.endTime = row.endTime;
      this.reviewForm.reason = row.reason;
      this.dialogReviewFormVisible = true;
    },
    scoreHandle(row) {
      this.scoreForm.id = row.id;
      this.scoreForm.score = row.score;
      this.scoreFormVisible = true;
    },
    submitReviewForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/objective/review", this.reviewForm).then((res) => {
            this.handleClose();
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "success",
              onClose: () => {
                this.getListObject();
              },
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitScoreForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/objective/score", this.scoreForm).then((res) => {
            this.scoreHandleClose();
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "success",
              onClose: () => {
                this.getListObject();
              },
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$refs["reviewForm"].resetFields;
      this.dialogReviewFormVisible = false;
    },
    scoreHandleClose() {
      this.$refs["scoreForm"].resetFields;
      this.scoreFormVisible = false;
    },
    getListObject() {
      this.$axios
        .post("/objective/page", {
          objectName: this.formInline.objectName,
          creator: this.formInline.creator,
          reviewUid: 1,
          status: this.formInline.status,
          review: this.formInline.review,
          current: this.current,
          size: this.size,
          type: this.type,
        })
        .then((res) => {
          this.listObject = res.data.data.records;
        });
    },
    // 展开事件----动态获取内嵌表数据
    getKeyResults(row) {
      // console.log(row)
      if (!row.hasKeyResults) {
        //根据hasKeyResults判定是否已经加载了数据
        setTimeout(() => {
          this.$axios.get("/key-results/list/" + row.id).then((res) => {
            row.keyResults = res.data.data;
            row.hasKeyResults = true; //加载成功之后更新标识
          });
        }, 1000);
      }
    },
    resetForm() {
      this.formInline = {};
    },
  },
};
</script>
<style scoped>
</style>